import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);
// 获取原型对象的push方法
const originalPush = VueRouter.prototype.push
// 修改原型对象的push方法
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
// 路由：根据不同路径加载不同组件
// 核心：使用一个路径映射一个组件
// 步骤：
// 1.创建页面组件，2.引入(使用懒加载)，并配置routes,3.编写视口组件router-view
const routes = [
  // route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  {
    path: '/discover',
    component: () => import( /*webpackChunkName:'discover' */ "../pages/Discover/index.vue"),
    redirect: "/discover/radio",
    children: [
      //多级路由里面的path,不能加" / "
      {
        path: "toplist",
        component: () => import( /*webpackChunkName */ "../pages/Discover/TopList")
      },
      {
        // 具名路由
        name: "radioV",
        path: "radio",
        component: () => import( /*webpackChunkName */ "../pages/Discover/Radio")
      }
    ]
  },
  //同一个路径可以对应多个组件，匹配优先级：谁先定义先配置谁
  // {
  //   path: '/discover',
  //   component: () => import( /*webpackChunkName:'discover' */ "../pages/page404")
  // },
  // 多视口(router-view):使用一个路径可以对应多个组件
  {
    path: '/friend',
    components: {
      "other": () => import( /*webpackChunkName */ "../pages/Other"),
      "friend": () => import( /*webpackChunkName */ "../pages/Friend"),
      // 默认
      default: () => import( /*webpackChunkName */ "../pages/Friend")
    }
  },
  {
    path: '/playList:name',
    component: () => import( /*webpackChunkName:'playList' */ "../pages/PlayList/index.vue")
  },
  {
    path: '/list',
    component: () => import( /*wenpackChunkName */ "../pages/List")
  },
  {
    name: "det",
    props: true, //动态路由参数解耦合
    path: '/detail/:productid',
    component: () => import( /*webpackChunkName */ "../pages/Detail")
  },
  {
    path: '/vuex',
    component: () => import( /*webpackChunkName */ "../pages/vuexPage")
  },
  {
    path:'/cart',
    component:()=>import(/*webpackChunkName */"../pages/Cart")
  },
  {
    path: '/*',
    component: () => import( /*webpackChunkName */ "../pages/page404")
  },
  
];

const router = new VueRouter({
  routes,
});

export default router;